<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>学知题库 - 智能教育资源平台</title>
    <link href="../assets/css/app.css" rel="stylesheet">
    <link href="../assets/css/font-awesome.min.css" rel="stylesheet">
    <script src="../assets/js/chart.umd.min.js"></script>
    
    <!-- Tailwind 配置 - 已合并到input.css -->
    <!-- 
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#165DFF',
                        secondary: '#36CBCB',
                        accent: '#FF7D00',
                        neutral: '#F5F7FA',
                        'neutral-dark': '#4E5969',
                        success: '#00B42A',
                        warning: '#FF7D00',
                        danger: '#F53F3F',
                    },
                    fontFamily: {
                        inter: ['Inter', 'system-ui', 'sans-serif'],
                    },
                }
            }
        }
    </script>
    
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .scrollbar-hide {
                -ms-overflow-style: none;
                scrollbar-width: none;
            }
            .scrollbar-hide::-webkit-scrollbar {
                display: none;
            }
            .text-shadow {
                text-shadow: 0 2px 4px rgba(0,0,0,0.1);
            }
            .card-hover {
                transition: all 0.3s ease;
            }
            .card-hover:hover {
                transform: translateY(-5px);
                box-shadow: 0 10px 20px rgba(0,0,0,0.08);
            }
            .bg-gradient-primary {
                background: linear-gradient(135deg, #165DFF 0%, #0E42B3 100%);
            }
            .progress-ring-circle {
                transition: stroke-dashoffset 0.35s;
                transform: rotate(-90deg);
                transform-origin: 50% 50%;
            }
            .animate-float {
                animation: float 3s ease-in-out infinite;
            }
            @keyframes float {
                0% { transform: translateY(0px); }
                50% { transform: translateY(-10px); }
                100% { transform: translateY(0px); }
            }
            .animate-slide-up {
                animation: slideUp 0.5s ease-out forwards;
            }
            @keyframes slideUp {
                from { opacity: 0; transform: translateY(20px); }
                to { opacity: 1; transform: translateY(0); }
            }
        }
    </style>
    -->
</head>
<body class="bg-gray-50 font-inter text-gray-800 min-h-screen flex flex-col">
    <!-- 顶部导航栏 -->
    <header class="bg-white sticky top-0 z-50 transition-all duration-300 shadow-md shadow-gray-100/80 backdrop-blur-sm bg-white/95">
        <div class="container mx-auto px-4">
            <div class="flex items-center justify-between h-16 md:h-20">
                <!-- 品牌Logo -->
                <div class="flex items-center">
                    <a href="#" class="flex items-center group">
                        <div class="w-10 h-10 rounded-lg bg-gradient-primary flex items-center justify-center mr-3 group-hover:scale-105 transition-transform">
                            <i class="fa fa-graduation-cap text-white text-xl"></i>
                        </div>
                        <h1 class="text-xl md:text-2xl font-bold text-gray-800 bg-clip-text text-transparent bg-gradient-to-r from-gray-800 to-gray-600">学知题库</h1>
                    </a>
                </div>
                
                <!-- 桌面端导航菜单 -->
                <nav class="hidden md:flex items-center space-x-8">
                    <a href="#" class="nav-item active text-primary font-medium transition-colors">首页</a>
                    <a href="#" class="nav-item text-gray-600 hover:text-primary transition-colors">题库</a>
                    <a href="#" class="nav-item text-gray-600 hover:text-primary transition-colors">学习路径</a>
                    <a href="#" class="nav-item text-gray-600 hover:text-primary transition-colors">模拟考试</a>
                    <a href="#" class="nav-item text-gray-600 hover:text-primary transition-colors">关于我们</a>
                </nav>
                
                <!-- 右侧功能区 -->
                <div class="flex items-center space-x-4">
                    <!-- 搜索框 -->
                    <div class="hidden md:block search-container">
                        <input type="text" placeholder="搜索题目、知识点或教材..." 
                               class="pl-10 pr-4 py-2 rounded-full bg-gray-100 focus:outline-none focus:ring-2 focus:ring-primary/30 transition-all w-56 md:w-64 text-sm">
                        <i class="fa fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
                    </div>
                    
                    <!-- 用户操作按钮 -->
                    <div class="flex items-center space-x-3">
                        <button class="px-4 py-2 bg-white text-primary border border-primary/20 rounded-lg hover:bg-primary/5 transition-all text-sm font-medium">登录</button>
                        <button class="px-4 py-2 bg-gradient-primary text-white rounded-lg hover:shadow-lg hover:shadow-primary/20 transition-all text-sm font-medium">注册</button>
                    </div>
                    
                    <!-- 移动端菜单按钮 -->
                    <button class="mobile-menu-btn">
                        <i class="fa fa-bars text-gray-700"></i>
                    </button>
                </div>
            </div>
        </div>
    </header>

    <!-- 主内容区 -->
    <main class="flex-1 overflow-y-auto bg-gray-50">
        <!-- 英雄区域 -->
        <section class="bg-gradient-primary text-white py-16 md:py-24">
            <div class="container mx-auto px-4">
                <div class="flex flex-col md:flex-row items-center justify-between">
                    <div class="md:w-1/2 mb-10 md:mb-0 animate-slide-up" style="animation-delay: 0.1s">
                        <h1 class="text-[clamp(2rem,5vw,3.5rem)] font-bold leading-tight mb-4">
                            智能教育平台<br>
                            <span class="text-secondary">让学习更高效</span>
                        </h1>
                        <p class="text-white/80 text-lg md:text-xl mb-8 max-w-lg">
                            覆盖K12全学科的智能题库、个性化学习路径和实时学情分析，助力学生全面提升学习成绩
                        </p>
                        <div class="flex flex-wrap gap-4">
                            <button class="px-8 py-3 bg-white text-primary rounded-lg hover:bg-gray-100 transition-all font-medium shadow-lg hover:shadow-xl">
                                开始学习
                            </button>
                            <button class="px-8 py-3 bg-transparent border border-white text-white rounded-lg hover:bg-white/10 transition-all font-medium">
                                了解更多
                            </button>
                        </div>
                        <div class="mt-8 flex items-center space-x-6">
                            <div class="flex -space-x-2">
                                <img src="https://picsum.photos/40/40?random=user1" alt="用户头像" class="w-10 h-10 rounded-full border-2 border-white">
                                <img src="https://picsum.photos/40/40?random=user2" alt="用户头像" class="w-10 h-10 rounded-full border-2 border-white">
                                <img src="https://picsum.photos/40/40?random=user3" alt="用户头像" class="w-10 h-10 rounded-full border-2 border-white">
                                <div class="w-10 h-10 rounded-full border-2 border-white bg-primary flex items-center justify-center text-xs font-medium">
                                    10k+
                                </div>
                            </div>
                            <div class="text-sm text-white/90">
                                <span class="font-bold">10,000+</span> 学生正在使用
                            </div>
                        </div>
                    </div>
                    <div class="md:w-1/2 flex justify-center animate-slide-up" style="animation-delay: 0.3s">
                        <img src="https://picsum.photos/600/400?random=education" alt="智能教育平台" class="w-full max-w-lg rounded-xl shadow-2xl">
                    </div>
                </div>
            </div>
        </section>

        <!-- 学段选择 -->
        <section class="py-16 bg-white">
            <div class="container mx-auto px-4">
                <div class="text-center mb-12">
                    <h2 class="text-3xl md:text-4xl font-bold mb-4">选择你的学段</h2>
                    <p class="text-gray-600 max-w-2xl mx-auto">我们提供从小学到高中全学段的学习资源，精准匹配各年级学习需求</p>
                </div>
                
                <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
                    <!-- 小学 -->
                    <div class="bg-neutral rounded-2xl p-8 shadow-sm card-hover">
                        <div class="w-16 h-16 rounded-full bg-primary/10 flex items-center justify-center mb-6">
                            <i class="fa fa-child text-primary text-2xl"></i>
                        </div>
                        <h3 class="text-xl font-bold mb-3">小学</h3>
                        <p class="text-gray-600 mb-6">涵盖语文、数学、英语等基础学科，通过趣味互动激发学习兴趣</p>
                        <div class="flex flex-wrap gap-2 mb-6">
                            <span class="px-3 py-1 bg-primary/10 text-primary text-xs rounded-full">一年级</span>
                            <span class="px-3 py-1 bg-primary/10 text-primary text-xs rounded-full">二年级</span>
                            <span class="px-3 py-1 bg-primary/10 text-primary text-xs rounded-full">三年级</span>
                            <span class="px-3 py-1 bg-primary/10 text-primary text-xs rounded-full">四年级</span>
                            <span class="px-3 py-1 bg-primary/10 text-primary text-xs rounded-full">五年级</span>
                            <span class="px-3 py-1 bg-primary/10 text-primary text-xs rounded-full">六年级</span>
                        </div>
                        <a href="#" class="text-primary font-medium flex items-center hover:underline">
                            查看详情 <i class="fa fa-arrow-right ml-2"></i>
                        </a>
                    </div>
                    
                    <!-- 初中 -->
                    <div class="bg-neutral rounded-2xl p-8 shadow-sm card-hover">
                        <div class="w-16 h-16 rounded-full bg-secondary/10 flex items-center justify-center mb-6">
                            <i class="fa fa-book text-secondary text-2xl"></i>
                        </div>
                        <h3 class="text-xl font-bold mb-3">初中</h3>
                        <p class="text-gray-600 mb-6">覆盖中考核心科目，强化基础同时培养思维能力，为高中学习奠定基础</p>
                        <div class="flex flex-wrap gap-2 mb-6">
                            <span class="px-3 py-1 bg-secondary/10 text-secondary text-xs rounded-full">初一</span>
                            <span class="px-3 py-1 bg-secondary/10 text-secondary text-xs rounded-full">初二</span>
                            <span class="px-3 py-1 bg-secondary/10 text-secondary text-xs rounded-full">初三</span>
                            <span class="px-3 py-1 bg-secondary/10 text-secondary text-xs rounded-full">语文</span>
                            <span class="px-3 py-1 bg-secondary/10 text-secondary text-xs rounded-full">数学</span>
                            <span class="px-3 py-1 bg-secondary/10 text-secondary text-xs rounded-full">英语</span>
                        </div>
                        <a href="#" class="text-secondary font-medium flex items-center hover:underline">
                            查看详情 <i class="fa fa-arrow-right ml-2"></i>
                        </a>
                    </div>
                    
                    <!-- 高中 -->
                    <div class="bg-neutral rounded-2xl p-8 shadow-sm card-hover">
                        <div class="w-16 h-16 rounded-full bg-accent/10 flex items-center justify-center mb-6">
                            <i class="fa fa-graduation-cap text-accent text-2xl"></i>
                        </div>
                        <h3 class="text-xl font-bold mb-3">高中</h3>
                        <p class="text-gray-600 mb-6">针对高考大纲，提供系统化学习方案，助力学生冲刺名校</p>
                        <div class="flex flex-wrap gap-2 mb-6">
                            <span class="px-3 py-1 bg-accent/10 text-accent text-xs rounded-full">高一</span>
                            <span class="px-3 py-1 bg-accent/10 text-accent text-xs rounded-full">高二</span>
                            <span class="px-3 py-1 bg-accent/10 text-accent text-xs rounded-full">高三</span>
                            <span class="px-3 py-1 bg-accent/10 text-accent text-xs rounded-full">文科</span>
                            <span class="px-3 py-1 bg-accent/10 text-accent text-xs rounded-full">理科</span>
                            <span class="px-3 py-1 bg-accent/10 text-accent text-xs rounded-full">全科</span>
                        </div>
                        <a href="#" class="text-accent font-medium flex items-center hover:underline">
                            查看详情 <i class="fa fa-arrow-right ml-2"></i>
                        </a>
                    </div>
                </div>
            </div>
        </section>

        <!-- 热门课程 -->
        <section class="py-16 bg-gray-50">
            <div class="container mx-auto px-4">
                <div class="flex flex-col md:flex-row md:items-end justify-between mb-12">
                    <div>
                        <h2 class="text-3xl md:text-4xl font-bold mb-4">热门推荐课程</h2>
                        <p class="text-gray-600 max-w-2xl">精选优质课程，由一线教师精心打造，针对性解决学习难点</p>
                    </div>
                    <div class="mt-4 md:mt-0">
                        <a href="#" class="text-primary font-medium flex items-center hover:underline">
                            查看全部课程 <i class="fa fa-arrow-right ml-2"></i>
                        </a>
                    </div>
                </div>
                
                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
                    <!-- 课程卡片1 -->
                    <div class="bg-white rounded-2xl overflow-hidden shadow-sm card-hover">
                        <div class="relative">
                            <img src="https://picsum.photos/600/400?random=c1" alt="初中数学几何专题" class="w-full h-48 object-cover">
                            <div class="absolute top-4 left-4 bg-primary text-white text-xs px-3 py-1 rounded-full">
                                热门
                            </div>
                        </div>
                        <div class="p-6">
                            <div class="flex items-center mb-3">
                                <span class="px-3 py-1 bg-primary/10 text-primary text-xs rounded-full">初中</span>
                                <span class="px-3 py-1 bg-gray-100 text-gray-600 text-xs rounded-full ml-2">数学</span>
                            </div>
                            <h3 class="text-xl font-bold mb-2">初中数学几何专题突破</h3>
                            <p class="text-gray-600 text-sm mb-4">全面解析几何难点，掌握解题技巧，提升几何成绩</p>
                            <div class="flex justify-between items-center">
                                <div class="flex items-center">
                                    <img src="https://picsum.photos/40/40?random=teacher1" alt="李老师" class="w-8 h-8 rounded-full mr-2">
                                    <span class="text-sm text-gray-700">李老师</span>
                                </div>
                                <div class="flex items-center">
                                    <i class="fa fa-star text-yellow-400 mr-1"></i>
                                    <span class="text-sm text-gray-700">4.9</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 课程卡片2 -->
                    <div class="bg-white rounded-2xl overflow-hidden shadow-sm card-hover">
                        <div class="relative">
                            <img src="https://picsum.photos/600/400?random=c2" alt="高中英语语法" class="w-full h-48 object-cover">
                            <div class="absolute top-4 left-4 bg-accent text-white text-xs px-3 py-1 rounded-full">
                                新课
                            </div>
                        </div>
                        <div class="p-6">
                            <div class="flex items-center mb-3">
                                <span class="px-3 py-1 bg-accent/10 text-accent text-xs rounded-full">高中</span>
                                <span class="px-3 py-1 bg-gray-100 text-gray-600 text-xs rounded-full ml-2">英语</span>
                            </div>
                            <h3 class="text-xl font-bold mb-2">高中英语语法全解析</h3>
                            <p class="text-gray-600 text-sm mb-4">从基础到进阶，系统梳理英语语法，突破高考难关</p>
                            <div class="flex justify-between items-center">
                                <div class="flex items-center">
                                    <img src="https://picsum.photos/40/40?random=teacher2" alt="王老师" class="w-8 h-8 rounded-full mr-2">
                                    <span class="text-sm text-gray-700">王老师</span>
                                </div>
                                <div class="flex items-center">
                                    <i class="fa fa-star text-yellow-400 mr-1"></i>
                                    <span class="text-sm text-gray-700">4.8</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 课程卡片3 -->
                    <div class="bg-white rounded-2xl overflow-hidden shadow-sm card-hover">
                        <div class="relative">
                            <img src="https://picsum.photos/600/400?random=c3" alt="小学语文阅读" class="w-full h-48 object-cover">
                            <div class="absolute top-4 left-4 bg-secondary text-white text-xs px-3 py-1 rounded-full">
                                推荐
                            </div>
                        </div>
                        <div class="p-6">
                            <div class="flex items-center mb-3">
                                <span class="px-3 py-1 bg-secondary/10 text-secondary text-xs rounded-full">小学</span>
                                <span class="px-3 py-1 bg-gray-100 text-gray-600 text-xs rounded-full ml-2">语文</span>
                            </div>
                            <h3 class="text-xl font-bold mb-2">小学语文阅读理解技巧</h3>
                            <p class="text-gray-600 text-sm mb-4">掌握阅读方法，提升答题准确率，轻松应对考试</p>
                            <div class="flex justify-between items-center">
                                <div class="flex items-center">
                                    <img src="https://picsum.photos/40/40?random=teacher3" alt="张老师" class="w-8 h-8 rounded-full mr-2">
                                    <span class="text-sm text-gray-700">张老师</span>
                                </div>
                                <div class="flex items-center">
                                    <i class="fa fa-star text-yellow-400 mr-1"></i>
                                    <span class="text-sm text-gray-700">4.7</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- 学习路径 -->
        <section class="py-16 bg-white">
            <div class="container mx-auto px-4">
                <div class="text-center mb-16">
                    <h2 class="text-3xl md:text-4xl font-bold mb-4">个性化学习路径</h2>
                    <p class="text-gray-600 max-w-2xl mx-auto">基于AI算法，为每位学生定制专属学习计划，高效提升学习效果</p>
                </div>
                
                <div class="relative">
                    <!-- 连接线 -->
                    <div class="hidden md:block absolute top-1/2 left-0 w-full h-1 bg-gray-200 -translate-y-1/2 z-0"></div>
                    
                    <div class="grid grid-cols-1 md:grid-cols-4 gap-8 relative z-10">
                        <!-- 步骤1 -->
                        <div class="bg-neutral rounded-2xl p-8 text-center card-hover">
                            <div class="w-16 h-16 rounded-full bg-primary flex items-center justify-center mx-auto mb-6">
                                <span class="text-white text-xl font-bold">01</span>
                            </div>
                            <h3 class="text-xl font-bold mb-3">水平测试</h3>
                            <p class="text-gray-600">通过智能测评系统，全面评估当前知识水平和学习能力</p>
                        </div>
                        
                        <!-- 步骤2 -->
                        <div class="bg-neutral rounded-2xl p-8 text-center card-hover">
                            <div class="w-16 h-16 rounded-full bg-primary flex items-center justify-center mx-auto mb-6">
                                <span class="text-white text-xl font-bold">02</span>
                            </div>
                            <h3 class="text-xl font-bold mb-3">制定计划</h3>
                            <p class="text-gray-600">AI算法分析测评结果，制定个性化学习路径和目标</p>
                        </div>
                        
                        <!-- 步骤3 -->
                        <div class="bg-neutral rounded-2xl p-8 text-center card-hover">
                            <div class="w-16 h-16 rounded-full bg-primary flex items-center justify-center mx-auto mb-6">
                                <span class="text-white text-xl font-bold">03</span>
                            </div>
                            <h3 class="text-xl font-bold mb-3">智能学习</h3>
                            <p class="text-gray-600">根据学习进度智能推送内容，动态调整学习难度和节奏</p>
                        </div>
                        
                        <!-- 步骤4 -->
                        <div class="bg-neutral rounded-2xl p-8 text-center card-hover">
                            <div class="w-16 h-16 rounded-full bg-primary flex items-center justify-center mx-auto mb-6">
                                <span class="text-white text-xl font-bold">04</span>
                            </div>
                            <h3 class="text-xl font-bold mb-3">效果评估</h3>
                            <p class="text-gray-600">定期学情分析和效果评估，持续优化学习路径</p>
                        </div>
                    </div>
                </div>
                
                <div class="mt-12 text-center">
                    <a href="#" class="inline-block px-8 py-3 bg-gradient-primary text-white rounded-lg hover:shadow-lg hover:shadow-primary/20 transition-all font-medium">
                        开始我的学习路径
                    </a>
                </div>
            </div>
        </section>

        <!-- 学情分析展示 -->
        <section class="py-16 bg-gray-50">
            <div class="container mx-auto px-4">
                <div class="flex flex-col lg:flex-row items-start gap-8">
                    <div class="lg:w-1/2">
                        <h2 class="text-3xl md:text-4xl font-bold mb-6">智能学情分析</h2>
                        <p class="text-gray-600 mb-8">
                            实时跟踪学习进度，多维度分析学习数据，生成个性化学习建议，让学习效果一目了然
                        </p>
                        
                        <div class="space-y-6">
                            <div class="flex items-start">
                                <div class="w-12 h-12 rounded-full bg-primary/10 flex items-center justify-center mr-4 flex-shrink-0">
                                    <i class="fa fa-line-chart text-primary"></i>
                                </div>
                                <div>
                                    <h3 class="text-lg font-bold mb-2">学习趋势分析</h3>
                                    <p class="text-gray-600">实时监控学习进度和效率，识别学习瓶颈，提供数据支持的改进建议</p>
                                </div>
                            </div>
                            
                            <div class="flex items-start">
                                <div class="w-12 h-12 rounded-full bg-secondary/10 flex items-center justify-center mr-4 flex-shrink-0">
                                    <i class="fa fa-tasks text-secondary"></i>
                                </div>
                                <div>
                                    <h3 class="text-lg font-bold mb-2">知识点掌握度</h3>
                                    <p class="text-gray-600">精确分析每个知识点的掌握情况，找出薄弱环节，提供针对性练习</p>
                                </div>
                            </div>
                            
                            <div class="flex items-start">
                                <div class="w-12 h-12 rounded-full bg-accent/10 flex items-center justify-center mr-4 flex-shrink-0">
                                    <i class="fa fa-lightbulb-o text-accent"></i>
                                </div>
                                <div>
                                    <h3 class="text-lg font-bold mb-2">个性化建议</h3>
                                    <p class="text-gray-600">基于AI算法生成个性化学习建议，优化学习计划，提高学习效率</p>
                                </div>
                            </div>
                        </div>
                        
                        <div class="mt-8">
                            <a href="#" class="inline-block px-6 py-3 bg-primary text-white rounded-lg hover:bg-primary/90 transition-all font-medium">
                                查看我的学情分析
                            </a>
                        </div>
                    </div>
                    
                    <div class="lg:w-1/2">
                        <div class="bg-white rounded-2xl shadow-lg p-6 card-hover max-w-md mx-auto lg:mx-0">
                            <div class="flex justify-between items-center mb-6">
                                <h3 class="text-xl font-bold">学情分析概览</h3>
                                <div class="flex gap-2">
                                    <button class="px-3 py-1 bg-primary/10 text-primary text-xs rounded-full">本周</button>
                                    <button class="px-3 py-1 bg-gray-100 text-gray-600 text-xs rounded-full hover:bg-gray-200 transition-colors">本月</button>
                                </div>
                            </div>
                            
                            <div class="grid grid-cols-2 gap-4 mb-6">
                                <div class="bg-neutral rounded-xl p-4">
                                    <div class="flex justify-between items-start mb-2">
                                        <span class="text-sm text-gray-600">学习时长</span>
                                        <i class="fa fa-clock-o text-primary"></i>
                                    </div>
                                    <div class="text-2xl font-bold">18.5小时</div>
                                    <div class="text-xs text-success flex items-center mt-1">
                                        <i class="fa fa-arrow-up mr-1"></i> 较上周 +23%
                                    </div>
                                </div>
                                
                                <div class="bg-neutral rounded-xl p-4">
                                    <div class="flex justify-between items-start mb-2">
                                        <span class="text-sm text-gray-600">做题正确率</span>
                                        <i class="fa fa-check-circle text-success"></i>
                                    </div>
                                    <div class="text-2xl font-bold">78%</div>
                                    <div class="text-xs text-success flex items-center mt-1">
                                        <i class="fa fa-arrow-up mr-1"></i> 较上周 +5%
                                    </div>
                                </div>
                            </div>
                            
                            <div class="mb-6">
                                <h4 class="text-sm font-medium mb-3">各学科正确率分布</h4>
                                <div class="h-32 bg-gray-50 rounded-lg flex items-center justify-center">
                                    <span class="text-gray-400 text-sm">图表加载中...</span>
                                </div>
                            </div>
                            
                            <div class="bg-neutral rounded-xl p-4">
                                <h4 class="text-sm font-medium mb-3">推荐学习重点</h4>
                                <div class="space-y-3">
                                    <div>
                                        <div class="flex justify-between text-xs mb-1">
                                            <span>数学 - 几何</span>
                                            <span>掌握度 45%</span>
                                        </div>
                                        <div class="w-full bg-gray-200 rounded-full h-1.5">
                                            <div class="bg-danger h-1.5 rounded-full" style="width: 45%"></div>
                                        </div>
                                    </div>
                                    <div>
                                        <div class="flex justify-between text-xs mb-1">
                                            <span>英语 - 阅读理解</span>
                                            <span>掌握度 58%</span>
                                        </div>
                                        <div class="w-full bg-gray-200 rounded-full h-1.5">
                                            <div class="bg-warning h-1.5 rounded-full" style="width: 58%"></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- 学习数据统计 -->
        <section class="py-16 bg-white">
            <div class="container mx-auto px-4">
                <div class="text-center mb-12">
                    <h2 class="text-3xl md:text-4xl font-bold mb-4">平台学习数据</h2>
                    <p class="text-gray-600 max-w-2xl mx-auto">已有超过10万学生选择我们，累计学习时长突破500万小时</p>
                </div>
                
                <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8">
                    <div class="bg-neutral rounded-2xl p-8 text-center card-hover">
                        <div class="text-4xl font-bold text-primary mb-2">10万+</div>
                        <p class="text-gray-600">注册学生</p>
                    </div>
                    
                    <div class="bg-neutral rounded-2xl p-8 text-center card-hover">
                        <div class="text-4xl font-bold text-secondary mb-2">500万+</div>
                        <p class="text-gray-600">累计学习时长</p>
                    </div>
                    
                    <div class="bg-neutral rounded-2xl p-8 text-center card-hover">
                        <div class="text-4xl font-bold text-accent mb-2">10万+</div>
                        <p class="text-gray-600">优质题目</p>
                    </div>
                    
                    <div class="bg-neutral rounded-2xl p-8 text-center card-hover">
                        <div class="text-4xl font-bold text-success mb-2">96%</div>
                        <p class="text-gray-600">学生满意度</p>
                    </div>
                </div>
            </div>
        </section>

        <!-- 用户评价 -->
        <section class="py-16 bg-gray-50">
            <div class="container mx-auto px-4">
                <div class="text-center mb-12">
                    <h2 class="text-3xl md:text-4xl font-bold mb-4">用户的真实评价</h2>
                    <p class="text-gray-600 max-w-2xl mx-auto">听听他们使用学知题库后的真实反馈</p>
                </div>
                
                <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
                    <!-- 评价1 -->
                    <div class="bg-white rounded-2xl p-8 shadow-sm card-hover">
                        <div class="flex items-center mb-6">
                            <img src="https://picsum.photos/60/60?random=parent1" alt="家长头像" class="w-12 h-12 rounded-full mr-4">
                            <div>
                                <h4 class="font-bold">李妈妈</h4>
                                <p class="text-gray-500 text-sm">初二学生家长</p>
                            </div>
                        </div>
                        <div class="mb-4">
                            <i class="fa fa-star text-yellow-400"></i>
                            <i class="fa fa-star text-yellow-400"></i>
                            <i class="fa fa-star text-yellow-400"></i>
                            <i class="fa fa-star text-yellow-400"></i>
                            <i class="fa fa-star text-yellow-400"></i>
                        </div>
                        <p class="text-gray-600">
                            "自从孩子使用学知题库后，数学成绩提高了不少。个性化的学习路径让孩子能够有针对性地弥补薄弱环节，AI学情分析也帮助我们家长更好地了解孩子的学习情况。"
                        </p>
                    </div>
                    
                    <!-- 评价2 -->
                    <div class="bg-white rounded-2xl p-8 shadow-sm card-hover">
                        <div class="flex items-center mb-6">
                            <img src="https://picsum.photos/60/60?random=student1" alt="学生头像" class="w-12 h-12 rounded-full mr-4">
                            <div>
                                <h4 class="font-bold">张同学</h4>
                                <p class="text-gray-500 text-sm">高三学生</p>
                            </div>
                        </div>
                        <div class="mb-4">
                            <i class="fa fa-star text-yellow-400"></i>
                            <i class="fa fa-star text-yellow-400"></i>
                            <i class="fa fa-star text-yellow-400"></i>
                            <i class="fa fa-star text-yellow-400"></i>
                            <i class="fa fa-star-half-o text-yellow-400"></i>
                        </div>
                        <p class="text-gray-600">
                            "学知题库的模拟考试功能非常实用，题目质量高，解析详细。通过多次模拟考试，我熟悉了高考题型和节奏，成绩稳步提升。推荐给所有高三的同学！"
                        </p>
                    </div>
                    
                    <!-- 评价3 -->
                    <div class="bg-white rounded-2xl p-8 shadow-sm card-hover">
                        <div class="flex items-center mb-6">
                            <img src="https://picsum.photos/60/60?random=teacher1" alt="教师头像" class="w-12 h-12 rounded-full mr-4">
                            <div>
                                <h4 class="font-bold">王老师</h4>
                                <p class="text-gray-500 text-sm">初中数学教师</p>
                            </div>
                        </div>
                        <div class="mb-4">
                            <i class="fa fa-star text-yellow-400"></i>
                            <i class="fa fa-star text-yellow-400"></i>
                            <i class="fa fa-star text-yellow-400"></i>
                            <i class="fa fa-star text-yellow-400"></i>
                            <i class="fa fa-star text-yellow-400"></i>
                        </div>
                        <p class="text-gray-600">
                            "作为一名教师，我推荐我的学生使用学知题库。平台上的题目分类清晰，解析详尽，而且学情分析功能可以帮助我更好地了解每个学生的学习情况，调整教学策略。"
                        </p>
                    </div>
                </div>
            </div>
        </section>

        <!-- 常见问题 -->
        <section class="py-16 bg-white">
            <div class="container mx-auto px-4">
                <div class="text-center mb-12">
                    <h2 class="text-3xl md:text-4xl font-bold mb-4">常见问题</h2>
                    <p class="text-gray-600 max-w-2xl mx-auto">我们收集了一些用户常见的问题，希望能帮助你更好地了解我们的平台</p>
                </div>
                
                <div class="max-w-3xl mx-auto">
                    <div class="space-y-4">
                        <!-- 问题1 -->
                        <div class="bg-neutral rounded-xl overflow-hidden">
                            <button class="faq-toggle w-full flex justify-between items-center p-6 text-left font-medium hover:bg-gray-100 transition-colors">
                                <span>如何开始使用学知题库？</span>
                                <i class="fa fa-chevron-down text-gray-500 transition-transform"></i>
                            </button>
                            <div class="faq-content px-6 pb-6 hidden">
                                <p class="text-gray-600">
                                    注册账号后，您可以先完成水平测试，系统会根据测试结果为您生成个性化学习路径。您也可以直接浏览题库，选择感兴趣的题目进行练习，或者参加模拟考试。
                                </p>
                            </div>
                        </div>
                        
                        <!-- 问题2 -->
                        <div class="bg-neutral rounded-xl overflow-hidden">
                            <button class="faq-toggle w-full flex justify-between items-center p-6 text-left font-medium hover:bg-gray-100 transition-colors">
                                <span>学知题库覆盖哪些学科和年级？</span>
                                <i class="fa fa-chevron-down text-gray-500 transition-transform"></i>
                            </button>
                            <div class="faq-content px-6 pb-6 hidden">
                                <p class="text-gray-600">
                                    学知题库覆盖小学一年级到高中三年级的所有主要学科，包括语文、数学、英语、物理、化学、生物、历史、地理、政治等。我们不断更新题库，确保内容的时效性和准确性。
                                </p>
                            </div>
                        </div>
                        
                        <!-- 问题3 -->
                        <div class="bg-neutral rounded-xl overflow-hidden">
                            <button class="faq-toggle w-full flex justify-between items-center p-6 text-left font-medium hover:bg-gray-100 transition-colors">
                                <span>如何查看我的学习数据和学情分析？</span>
                                <i class="fa fa-chevron-down text-gray-500 transition-transform"></i>
                            </button>
                            <div class="faq-content px-6 pb-6 hidden">
                                <p class="text-gray-600">
                                    登录后，点击页面顶部的"学情分析"按钮，您可以查看学习时长、做题正确率、各学科掌握情况等数据。系统会定期生成详细的学情报告，并提供个性化的学习建议。
                                </p>
                            </div>
                        </div>
                        
                        <!-- 问题4 -->
                        <div class="bg-neutral rounded-xl overflow-hidden">
                            <button class="faq-toggle w-full flex justify-between items-center p-6 text-left font-medium hover:bg-gray-100 transition-colors">
                                <span>学知题库的题目来源是什么？</span>
                                <i class="fa fa-chevron-down text-gray-500 transition-transform"></i>
                            </button>
                            <div class="faq-content px-6 pb-6 hidden">
                                <p class="text-gray-600">
                                    我们的题目由一线教师精心设计，结合历年考试真题和教学经验。所有题目都经过严格筛选和审核，确保质量和准确性。此外，我们还会根据最新的教学大纲和考试要求不断更新题库。
                                </p>
                            </div>
                        </div>
                        
                        <!-- 问题5 -->
                        <div class="bg-neutral rounded-xl overflow-hidden">
                            <button class="faq-toggle w-full flex justify-between items-center p-6 text-left font-medium hover:bg-gray-100 transition-colors">
                                <span>如何获得更多的学习资源和服务？</span>
                                <i class="fa fa-chevron-down text-gray-500 transition-transform"></i>
                            </button>
                            <div class="faq-content px-6 pb-6 hidden">
                                <p class="text-gray-600">










                                    您可以升级到我们的高级会员，享受更多优质学习资源、专属课程和一对一辅导服务。此外，我们还会定期举办线上讲座和学习活动，会员可以优先参与。
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- 订阅区域 -->
        <section class="py-16 bg-gradient-primary text-white">
            <div class="container mx-auto px-4">
                <div class="max-w-3xl mx-auto text-center">
                    <h2 class="text-3xl md:text-4xl font-bold mb-6">订阅我们的学习资讯</h2>
                    <p class="text-white/80 mb-8">获取最新的教育资讯、学习方法和考试技巧，助您的学习更上一层楼</p>
                    <form class="flex flex-col sm:flex-row gap-4 max-w-xl mx-auto">
                        <input type="email" placeholder="请输入您的邮箱地址" 
                               class="flex-1 px-4 py-3 rounded-lg focus:outline-none focus:ring-2 focus:ring-white/30 text-gray-800">
                        <button type="submit" class="px-6 py-3 bg-white text-primary rounded-lg hover:bg-gray-100 transition-all font-medium">
                            立即订阅
                        </button>
                    </form>
                    <p class="text-white/60 text-sm mt-4">我们尊重您的隐私，不会向任何第三方泄露您的信息</p>
                </div>
            </div>
        </section>
    </main>

    <!-- 页脚 -->
    <footer class="bg-gray-900 text-white py-12">
        <div class="container mx-auto px-4">
            <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
                <div>
                    <div class="flex items-center mb-6">
                        <div class="w-10 h-10 rounded-lg bg-gradient-primary flex items-center justify-center mr-3">
                            <i class="fa fa-graduation-cap text-white text-xl"></i>
                        </div>
                        <h2 class="text-xl font-bold">学知题库</h2>
                    </div>
                    <p class="text-gray-400 mb-6">智能教育资源平台，助力学生高效学习，提升成绩</p>
                    <div class="flex space-x-4">
                        <a href="#" class="w-10 h-10 rounded-full bg-gray-800 flex items-center justify-center hover:bg-primary/80 transition-colors">
                            <i class="fa fa-weixin text-white"></i>
                        </a>
                        <a href="#" class="w-10 h-10 rounded-full bg-gray-800 flex items-center justify-center hover:bg-primary/80 transition-colors">
                            <i class="fa fa-weibo text-white"></i>
                        </a>
                        <a href="#" class="w-10 h-10 rounded-full bg-gray-800 flex items-center justify-center hover:bg-primary/80 transition-colors">
                            <i class="fa fa-qq text-white"></i>
                        </a>
                    </div>
                </div>
                
                <div>
                    <h3 class="text-lg font-bold mb-6">快速链接</h3>
                    <ul class="space-y-3">
                        <li><a href="#" class="text-gray-400 hover:text-white transition-colors">首页</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white transition-colors">题库</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white transition-colors">学习路径</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white transition-colors">模拟考试</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white transition-colors">关于我们</a></li>
                    </ul>
                </div>
                
                <div>
                    <h3 class="text-lg font-bold mb-6">学段</h3>
                    <ul class="space-y-3">
                        <li><a href="#" class="text-gray-400 hover:text-white transition-colors">小学</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white transition-colors">初中</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white transition-colors">高中</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white transition-colors">学科资料</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white transition-colors">教师专区</a></li>
                    </ul>
                </div>
                
                <div>
                    <h3 class="text-lg font-bold mb-6">联系我们</h3>
                    <ul class="space-y-3">
                        <li class="flex items-start">
                            <i class="fa fa-map-marker text-primary mt-1 mr-3"></i>
                            <span class="text-gray-400">北京市海淀区中关村大街1号</span>
                        </li>
                        <li class="flex items-center">
                            <i class="fa fa-phone text-primary mr-3"></i>
                            <span class="text-gray-400">400-123-4567</span>
                        </li>
                        <li class="flex items-center">
                            <i class="fa fa-envelope text-primary mr-3"></i>
                            <span class="text-gray-400">contact@xuezhi.com</span>
                        </li>
                    </ul>
                </div>
            </div>
            
            <div class="border-t border-gray-800 mt-12 pt-8 flex flex-col md:flex-row justify-between items-center">
                <p class="text-gray-500 text-sm mb-4 md:mb-0">© 2025 学知题库. 保留所有权利</p>
                <div class="flex space-x-6">
                    <a href="#" class="text-gray-500 hover:text-white text-sm transition-colors">隐私政策</a>
                    <a href="#" class="text-gray-500 hover:text-white text-sm transition-colors">服务条款</a>
                    <a href="#" class="text-gray-500 hover:text-white text-sm transition-colors">帮助中心</a>
                </div>
            </div>
        </div>
    </footer>

    <!-- JavaScript -->
    <script>
        // 导航栏滚动效果
        window.addEventListener('scroll', function() {
            const header = document.querySelector('header');
            if (window.scrollY > 50) {
                header.classList.add('shadow-md');
                header.classList.add('bg-white/95');
            } else {
                header.classList.remove('shadow-md');
                header.classList.remove('bg-white/95');
            }
        });

        // 移动端菜单切换
        document.querySelector('.mobile-menu-btn').addEventListener('click', function() {
            const nav = document.querySelector('nav');
            nav.classList.toggle('hidden');
            nav.classList.toggle('flex');
            nav.classList.toggle('flex-col');
            nav.classList.toggle('absolute');
            nav.classList.toggle('top-16');
            nav.classList.toggle('left-0');
            nav.classList.toggle('w-full');
            nav.classList.toggle('bg-white');
            nav.classList.toggle('shadow-lg');
            nav.classList.toggle('p-4');
        });

        // FAQ 切换
        document.querySelectorAll('.faq-toggle').forEach(toggle => {
            toggle.addEventListener('click', function() {
                const content = this.nextElementSibling;
                const icon = this.querySelector('i');
                
                // 切换内容显示状态
                content.classList.toggle('hidden');
                
                // 切换图标旋转
                if (content.classList.contains('hidden')) {
                    icon.style.transform = 'rotate(0deg)';
                } else {
                    icon.style.transform = 'rotate(180deg)';
                }
            });
        });

        // 初始化学科图表
        document.addEventListener('DOMContentLoaded', function() {
            const ctx = document.getElementById('subjectChart').getContext('2d');
            
            const subjectChart = new Chart(ctx, {
                type: 'bar',
                data: {
                    labels: ['数学', '语文', '英语', '物理', '化学', '生物'],
                    datasets: [{
                        label: '正确率',
                        data: [75, 85, 82, 68, 72, 78],
                        backgroundColor: [
                            '#165DFF',
                            '#36CBCB',
                            '#FF7D00',
                            '#00B42A',
                            '#F53F3F',
                            '#722ED1'
                        ],
                        borderRadius: 6,
                        barThickness: 12,
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: {
                            display: false
                        }
                    },
                    scales: {
                        y: {
                            beginAtZero: true,
                            max: 100,
                            ticks: {
                                callback: function(value) {
                                    return value + '%';
                                }
                            }
                        }
                    }
                }
            });
        });

        // 平滑滚动
        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
            anchor.addEventListener('click', function(e) {
                e.preventDefault();
                
                const targetId = this.getAttribute('href');
                if (targetId === '#') return;
                
                const targetElement = document.querySelector(targetId);
                if (targetElement) {
                    window.scrollTo({
                        top: targetElement.offsetTop - 80,
                        behavior: 'smooth'
                    });
                }
            });
        });
    </script>
</body>
</html>